<script setup>
import { ref, onMounted, computed } from "vue";
import QrcodeVue from "qrcode.vue";
// import type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'
import html2canvas from "html2canvas";

const props = defineProps({
  qrValue: {
    type: String,
    default: "",
  },
  renderAs: {
    type: String,
    default: "",
  },
  qrBGcolor: {
    type: String,
    default: "",
  },
  qrBGalpha: {
    type: Number,
    default: 1,
  },
  qrforecolor: {
    type: String,
    default: "",
  },
  qrforealpha: {
    type: Number,
    default: 1,
  },
  qrlevel: {
    type: String,
    default: "H",
  },
  qrsize: {
    type: Number,
    default: 0,
  },
  qrpadding: {
    type: Number,
    default: 0,
  },
  iconUrl: {
    type: String,
    default: "",
  },
  iconRatio: {
    type: Number,
    default: 0,
  },
  iconPaddingRatio: {
    type: Number,
    default: 0,
  },
  gradientOn: {
    type: Boolean,
    default: false,
  },
  gradientType: {
    type: String,
    default: "",
  },
  gradientStartColor: {
    type: String,
    default: "",
  },
  gradientEndColor: {
    type: String,
    default: "",
  },
});
const saveQRcodeScale = ref(0)
const qrcodePadding = computed(() => {
  return props.qrsize * 0.01
})
const containerRef = ref(null);
const qrconRef = ref(null);
function saveQRCodeAsImage() {
  html2canvas(containerRef.value, {
    scale: saveQRcodeScale.value,
    // width: props.qrsize,
    // height: props.qrsize,
  }).then((canvas) => {
    // canvas.width = props.qrsize + "px"
    // canvas.height = props.qrsize + "px"
    const imgData = canvas.toDataURL("image/png");
    // 创建一个 <a> 标签用于下载
    const link = document.createElement("a");
    link.href = imgData;
    link.download = "qrcode.png"; // 下载文件名
    link.click();
  });
}
onMounted(() => {
  saveQRcodeScale.value = 1 / 1.1
  containerRef.value.style.setProperty("--containerbgcolor", props.qrBGcolor);
  const conpadding = props.qrsize * 0.05 + "px";
  containerRef.value.style.setProperty("--conpadding", conpadding);
  const consize = props.qrsize * (1 + 0.05 * 2) + "px";
  containerRef.value.style.setProperty("--consize", consize);
  const qrsize = props.qrsize + "px";
  containerRef.value.style.setProperty("--qrsize", qrsize);
  const qrLeft = props.qrsize * (0.5 + 0.05) + "px";
  containerRef.value.style.setProperty("--qrLeft", qrLeft);
  const qrback = props.qrsize * -0.5 + "px";
  containerRef.value.style.setProperty("--qrback", qrback);
  const iconSize = props.qrsize * props.iconRatio + "px";
  containerRef.value.style.setProperty("--iconsize", iconSize);
  const iconPadding = props.qrsize * props.iconPaddingRatio + "px";
  containerRef.value.style.setProperty("--iconPadding", iconPadding);
});
</script>

<template>
  <div ref="containerRef" class="qrcontainer">
    <qrcode-vue
      ref="qrconRef"
      class="qrcon"
      :value="props.qrValue"
      :size="props.qrsize"
      :margin="qrcodePadding"
      :level="props.qrlevel"
      :render-as="props.renderAs"
      :background="props.qrBGcolor"
      :foreground="props.qrforecolor"
      :gradient="props.gradientOn"
      :gradient-type="props.gradientType"
      :gradient-start-color="props.gradientStartColor"
      :gradient-end-color="props.gradientEndColor"
    ></qrcode-vue>
    <img :src="iconUrl" alt="" class="icon" />
  </div>
  <button @click="saveQRCodeAsImage">保存二维码</button>
</template>

<style lang="scss" scoped>
.qrcontainer {
  box-sizing: border-box;
  width: var(--consize);
  height: var(--consize);
  background-color: var(--containerbgcolor);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
  .qrcon {
    box-sizing: border-box;
    width: var(--qrsize);
    height: var(--qrsize);
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    // transform: translate(0, -50%);
    background-color: var(--containerbgcolor);
    z-index: 1;
    border: 1px solid red;
  }
  .icon {
    width: var(--iconsize);
    height: var(--iconsize);
    padding: var(--iconPadding);
    background-color: var(--containerbgcolor);
    position: absolute;
    left: var(--qrLeft);
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20%;
    z-index: 3;
  }
}
// button {
//   position: absolute;
// }
</style>
